import React, { useEffect, useState } from 'react'
import { Descriptions, PageHeader } from 'antd'
import moment from 'moment'
import axios from 'axios'
import {
  HeartTwoTone
} from '@ant-design/icons'

export default function Detail(props) {
  const [news, setNews] = useState({})
  useEffect(() => {
    const { id } = props.match.params
    axios.get(`/news/${id}?_expand=role&_expand=category`).then((res) => {
      console.log(res.data)
      setNews({
        ...res.data,
        view: res.data.view+1
      })
      return res.data
    }).then((res) => {
      axios.patch(`/news/${props.match.params.id}`, {
        view: res.view+1,
      })
    })
  }, [props.match.params])
  const handleStar = () => {
    setNews({
      ...news,
      star: news.star+1
    })
    axios.patch(`/news/${props.match.params.id}`, {
      view: news.view+1,
    }).then(res=>{
      console.log(res)
    })
  }

  return (
    <div className="site-page-header-ghost-wrapper">
      {news && (
        <div>
          <PageHeader
            ghost={false}
            onBack={() => window.history.back()}
            title={news.title}
            subTitle={<div>
              {news?.category?.value}
              <HeartTwoTone twoToneColor="#eb2f96" onClick={()=>handleStar()}/>
            </div>}
          >
            <Descriptions size="small" column={3}>
              <Descriptions.Item label="创建者">
                {news.author}
              </Descriptions.Item>
              <Descriptions.Item label="发布时间">
                {news.publishTime
                  ? moment(news.publishTime).format('yyyy-MM-DD HH:mm:ss')
                  : '-'}
              </Descriptions.Item>
              <Descriptions.Item label="区域">{news.region}</Descriptions.Item>
              <Descriptions.Item label="访问数量">
                <span style={{ color: 'green' }}>{news.view}</span>
              </Descriptions.Item>
              <Descriptions.Item label="点赞数量">
                <span style={{ color: 'green' }}>{news.star}</span>
              </Descriptions.Item>
              <Descriptions.Item label="评论数量">
                <span style={{ color: 'green' }}>0</span>
              </Descriptions.Item>
            </Descriptions>
          </PageHeader>

          <div
            dangerouslySetInnerHTML={{
              __html: news.content,
            }}
            style={{ 
              margin:"0 24px",
              border: "1px solid purple" 
            }}
          ></div>
        </div>
      )}
    </div>
  )
}

